import { Col, Row } from 'antd';
import {
  ArgumentAxis,
  Chart,
  CommonAxisSettings,
  CommonSeriesSettings,
  Format,
  Grid,
  Label,
  Legend,
  Margin,
  Series,
  Tooltip,
} from 'devextreme-react/chart';
import { useEffect, useRef, useState } from 'react';
import styles from './style/index.less';
import './style/index.global.less';
export interface FileChartData {
  date: string;
  paper: number;
  attachment: number;
}

export interface FileChartProps {
  data: FileChartData[];
}

const FileChart = (props: FileChartProps) => {
  const { data } = props;

  const [fileChartHeight, setFileChartHeight] = useState(200);
  const [fileChartWidth, setFileChartWidth] = useState(200);
  const refChartContainer = useRef<any>(null);
  const refChart = useRef<any>(null);

  const customPalette = ['#4F2D7F', '#E92841'];
  const architectureSources = [
    { value: 'paper', name: '底稿数量' },
    { value: 'attachment', name: '附件数量' },
  ];

  if (refChart.current && refChart.current?.instance) {
    setTimeout(() => {
      refChart.current?.instance?.refresh();
      console.log('---------chart refresh----------------------')
    }, 200);
  }

  const onWindowResize = () => {
    setFileChartHeight(refChartContainer.current?.clientHeight - 1);
    setFileChartWidth(refChartContainer.current?.clientWidth - 1);
    console.log('resize to:', refChartContainer.current?.clientWidth - 1, ', ', refChartContainer.current?.clientHeight - 1,)
  };

  useEffect(() => {
    window.addEventListener('resize', onWindowResize);
    onWindowResize();
    // refChart.current.instance.render({
    //   force: true, // forces redrawing
    //   animate: false,
    // });
    return () => {
      window.removeEventListener('resize', onWindowResize);
    };
  }, []);

  return (
    <>
      <div className={styles.container}>
        <Row align="middle">
          <Col span={14} className={styles.title}>
            文件数量
          </Col>
          <Col span={8} style={{ textAlign: 'right' }}>
            <span className={styles.circle} style={{ backgroundColor: '#4F2D7F' }} />底稿数量
            <span className={styles.circle} />附件数量
          </Col>
        </Row>
        <Row style={{ flexGrow: 1, height: 100 }}>
          <Col ref={refChartContainer} span={24} className={styles.content} style={{ height: '100%' }}>
            <Chart
              palette={customPalette}
              dataSource={data}
              // height={fileChartHeight}
              // width={fileChartWidth}
              width={'100%'}
              height={'100%'}
              id="file-chart"
              ref={refChart}
            >
              <Margin top={20} bottom={20} left={30} right={30} />
              <CommonSeriesSettings argumentField="date" type={'spline'} />
              <CommonAxisSettings constantLineStyle={{ dashStyle: 'longDash' }}>
                <Grid visible={true} color={'#e5e5e5'} />
              </CommonAxisSettings>
              {architectureSources.map((item) => (
                <Series key={item.value} valueField={item.value} name={item.name} />
              ))}
              <ArgumentAxis allowDecimals={false} axisDivisionFactor={60}>
                <Label>
                  <Format type="decimal" />
                </Label>
              </ArgumentAxis>
              <Legend verticalAlignment="top" horizontalAlignment="right" visible={false} />
              {/* <Export enabled={true} /> */}
              <Tooltip enabled={true} />
            </Chart>
          </Col>
        </Row>
      </div>
    </>
  );
};

export default FileChart;
